<template>
<Cascader v-bind="$attrs" v-on="$listeners" :data="data" v-model="val" :placeholder="placeholder"></Cascader>
</template>

<script>
import {
    transformTozTreeFormat
} from '@/utils/tool'

export default {
    props: {
        //只接收行政区域id
        value: {
            type: [String, Array, Number]
        },
        level: {
            type: Number,
            default: 0
        },
        auth: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            data: [],
            items: [],
            val: [],
            placeholder: "数据加载中...",
            areaLevel: [{
                id: 10000007770004,
                name: "国"
            }, {
                id: 10000007770005,
                name: "省/直辖市"
            }, {
                id: 10000007770006,
                name: "市/市辖区"
            }, {
                id: 10000007770007,
                name: "区/县"
            }, {
                id: 10000007770008,
                name: "街道/乡镇"
            }, {
                id: 10000007770009,
                name: "社区/村"
            }, {
                id: 10000007770010,
                name: "网格/组"
            }]
        }
    },
    computed: {
        areapath: function () {
            if (this.auth) {
                return JSON.parse(window.localStorage.getItem("userInfo")).areapath
            } else {
                return "100000000000"
            }
        }
    },
    watch: {
        value: "initData"
    },
    methods: {
        //获取初始的数据
        async getInitData() {
            let userInfo = window.localStorage.getItem("userInfo")

            let res = await this.$api.area.getAreaByLevelidAndPid({
                path: this.areapath,
                levelid: this.areaLevel[this.level].id
            });
            res.rows.map(area => {
                area.value = area.id
                area.label = area.areaname
            })
            
            this.items = JSON.parse(JSON.stringify(res.rows))
            
            this.data = transformTozTreeFormat({
                key: "id",
                parentKey: "parentid",
                childKey: "children"
            }, res.rows)
            
            this.placeholder = "请选择"
        },
        async initData(val) {
            if (val == undefined || val == -1 || val.toString() == "") {
                this.val = []
            } else {
                if (this.items.length > 0) {
                    let path = this.items.find(item => item.id == val).path
                    let pathArray = path.substr(path.indexOf(this.areapath) + 13).split(".")
                    pathArray.map(element => {
                        this.val.push(parseInt(element));
                    });
                } else {
                    let resArea = await this.$api.area.getAreaByID({
                        id: val
                    });
                    
                    if (resArea.rows.length > 0) {
                        let path = resArea.rows[0].path
                        let pathArray = path.substr(path.indexOf(this.areapath) + 13).split(".")
                        pathArray.map(element => {
                            this.val.push(parseInt(element));
                        });
                    }
                }
            }
        }
    },
    created() {
        this.getInitData()
    }
}
</script>

<style lang="less" scoped>

</style>
